<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component_props</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1.定义组件
    class Like extends React.Component{
        constructor(props) {
            super(props);
            // 初始化状态
            this.state = {
                isLikeMe:false
            }
            //将新增方法中的this强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this)

        }
        //新添加方法：内部的this默认不是组件对象，而是undefined
        handleClick(){
            const isLikeMe = !this.state.isLikeMe
            //更新状态
            this.setState({ isLikeMe })
        }
        //重写组件类方法
        render(){
            const {isLikeMe} = this.state
            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
        }
    }

    // 渲染组件标签
    ReactDOM.render(<Like />,document.getElementById('example'))

</script>
</body>
</html>